Gif-animaties maken 


In de vorige les hebben we kennisgemaakt met de voordelen die het jpeg-for- 
maat biedt aan webplaatjes: ondersteuning van jpeg 24-bits kleuren: 16,7 mil- 
joen kleuren. Waarom zou je dan nog gebruikmaken van het gíf-bestandsfor- 
maat (Graphics Interchange Format) dat slechts met 8-bits kleuren werkt en 


hoogstens 256 kleuren kan weergeven? 


zelfs nog veel lager proberen te houden dan 256. Er zijn drie goe- 

de redenen om de voorkeur te geven aan gif in plaats van jpeg. 
Gif is een uitstekende keuze voor de compressie van afbeeldingen 
met effen kleuren en scherpe aftekeningen, denk maar aan tekenin- 
gen, logo’s. Bovendien kan je bij gif-plaatjes de achtergrond transpa- 
rant maken. Een derde argument is dat je er kleine animaties mee 
kan maken, de zogenaamde bewegende gifs of animated gifs. 


= rvaren webbouwers zullen het aantal kleuren van gif-plaatjes 
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Stap 1 
Slanker voor het web 


Wanneer we BESTAND — OPSLAAN VOOR WEB kiezen, krijgen we het 
handige, dubbele afbeeldingsvenster te zien. In dat venster wordt 
aan de linkerkant de oorspronkelijke afbeelding getoond; in het 
rechtervak wordt de geoptimaliseerde versie voorgeschoteld. Op 
die manier kunnen we experimenteren met de optimaliseringsin- 
stellingen. Onderaan dit voorvertoningvenster lezen we na iedere 
ingreep onmiddellijk hoe groot het bestand na deze afslankings- 
kuur zal worden. Wanneer je voor het gif-formaat kiest, wordt de 
afbeelding omgezet in maximaal 256 kleuren. Het proces dat be- 
paalt welke kleuren daarbij worden gebruikt, noemen we indexe- 
ring. Er wordt een tabel samengesteld van de kleuren die voor dat 
plaatje van dienst zijn. Als je bij een afbeelding het bereik van 256 
kleuren laat inkrimpen naar bijvoorbeeld 128 kleuren, zal het pro- 
gramma zelf bepalen welke kleuren het uit deze 128-tabel zal ge- 
bruiken om de oorspronkelijke kleuren te benaderen. Lukt dat niet, 
dan zal Photoshop Elements met de beschikbare kleuren de origi- 
nele tinten trachten te simuleren (ditheren) door aangrenzende 
pixels te combineren. Stel je voor dat er een felle groene kleur moet 
worden getoond, dan zullen bij dithering gele en blauwe beeld- 
punten heel dicht tegen elkaar worden gezet, waardoor de kijker 
toch dat bepaald groen ziet. Het nadeel van dithering is dat het 
plaatje niet meer zo scherp en gedetailleerd is. 
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Stap 2 
Instellingen voor gif's 


Bij de optie Gir mag je bepalen welk 
algoritme voor de kleurreductie wordt 
gebruikt: PERCEPTUEEL, SELECTIEF, 
ADAPTIEF of WEB. 

- PERCEPTUEEL maakt een tabel zodat 
de kleuren waar het menselijk oog het 
meest gevoelig voor is, voorrang krij- 
gen. 

- SELECTIEF is de standaardoptie, om- 
dat de webkleuren behouden blijven 
en brede kleurgebieden benadrukt 
worden. 
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- Bij ADAPTIEF wordt een kleurentabel gemaakt aan de hand van de 
tinten die het meest in de afbeelding voorkomen. 

- Bij WeB, ook wel webveilig genoemd, wordt geen dithering toe- 
gepast. Alle kleuren worden gevormd uit de tinten die webveilig 
zijn en dus op alle computersystemen hetzelfde zijn. 

Wanneer je opteert voor DITHERING, heb je de keuze uit GEEN RAS- 
TERING, PATROON, DIFFUSIE en Ruis. 

- Bij GEEN RASTERING wordt er geen dithering toegepast. 

- Bij PATROON wordt er een rasterpatroon van kleine vierkantjes ge- 
bruikt om zo de vreemde kleuren te simuleren. 

- DiFFUsIE geeft een meer verspreid en minder opvallend effect, 
want PATROON geeft vaak een storend wafeleffect. 

- Ruis is eveneens een willekeurig patroon, zonder dat er aan- 
grenzende pixels worden verspreid. 

Wanneer de afbeelding transparante delen bevat, kan je de optie 
TRANSPARANTIE inschakelen om de transparante pixels ongewijzigd 
te laten. Als TRANSPARANTIE uit staat, zullen de transparante pixels 
uit het plaatje gevuld worden met de randkleuren. 

De instelling INTERLINIËRING betekent dat je tijdens een surfbezoek 
eerst een lage-resolutie-afbeelding te zien krijgt nog voor het hele 
afbeeldingsbestand wordt ingeladen. Webbezoekers zullen dat op 
prijs stellen. Ze zien al iets gebeuren in afwachting dat het hele 
plaatje wordt ingeladen. 


Stap 3 
Transparante achtergrond 


Open het plaatje ‘hoempa.jpg’, waarvan de extensie jpg verraadt 
dat het om een jpeg-bestand gaat. Je wil de achtergrond transpa- 
rant maken om deze afbeelding achteraf met behulp van een web- 
editor over een 
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ken van dezelfde kleur transparant worden. De transparantie wordt 
voorgesteld door een schaakbordpatroon. 

Om de witte achtergrond in het binnenwerk van het muziekin- 
strument te verwijderen, moet je flink inzoomen (Ctrl+ of Mac OS 
Appeltje+) om te vermijden dat je per ongeluk een fragment koper 
zou weggummen. Als dat toch zou gebeuren, kan je altijd via Be- 
WERKEN — ONGEDAAN MAKEN TOVERGUMMETJE terugkeren naar de vo- 
rige stap. 
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Animated gif: Een snelle opeenvol- 
ging van een aantal gif-afbeeldin- 
gen, die telkens lichtjes van elkaar 
verschillen. Op die manier ontstaat 
er een beweging, volgens het prin- 
cipe van de animatiefilm. 


Gif: (Graphics Interchange Format) 
Een gecomprimeerd formaat van 
afbeeldingen met maximaal 256 
kleuren. 


Jpeg: Een grafisch bestandsfor- 
maat dat vaak wordt gebruikt op 
het internet. Dit formaat maakt 
gebruik van een speciaal compres- 


siemechanisme waardoor de plaat- 
jes nòg kleiner kunnen worden 
gemaakt. 


Pixel: (Picture Element) Ook wel 
beeldpunt genoemd. Het is de 
kleinste eenheid waaruit een beeld- 
scherm is opgebouwd. Een resolu- 
tie van 800 bij 600 betekent dat 
een scherm horizontaal 800 en 
verticaal 600 pixels kan afbeelden. 


Resolutie: Een term om de kwali- 
teit en scherpte van een beeld, een 
foto of een afdruk uit te drukken. 
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Stap 4 
Transparante gif 


Nu de achtergrond volledig transparant is, kan je er een transpa- 
rante gif van maken. Selecteer BESTAND — OPSLAAN VOOR WEB. Daar 
duid je aan dat deze afbeelding een gif—bestand moet worden. 

Reduceer het aantal gebruikte kleuren tot slechts 32. Check in het 
voorvertoningsvenster dat het resultaat aanvaardbaar blijft. De be- 
standsgrootte die origineel 5og KB was, wordt door deze afslan- 


Opslaan als… 


kingskuur herleid tot 28 KB. Omdat je het plaatje tegen een blau- 
we achtergrond wil gebruiken, kies je in het vakje RANp een blau- 
we kleur. Het gebeurt dikwijls dat er een storende rand rond een 
transparante afbeelding verschijnt. Dat kan je vermijden door een 
randkleur te kiezen die overeenstemt met de achtergrond die je la- 
ter wenst te gebruiken. Ziezo, het maken van een transparante gif 
is echt kinderspel met Photoshop Elements. 


Stap 5 
Geanimeerde gif 


Een animated gif is niet veel meer dan een paar tekeningen in gif- 
formaat die in sneltempo achter elkaar worden getoond. Met een 
plaatje of vijf bereik je al een effect waarbij het nauwelijks nog op- 
valt dat je met losse tekeningen te maken hebt. Om een bewegen- 
de gif te maken, vertrekken we gemakshalve opnieuw van het be- 
stand hoempa.jpg (alle oefenbestanden vind je op de Clickx-site). 
We hebben meer ruimte boven de tuba nodig om de tekst aan te 
brengen. Daarom passen we de canvasgrootte van dit plaatje aan. 
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De canvasgrootte aanpassen voor tekst. 
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Stap 6 
Tekst toevoegen 


Vervolgens geef je de tekst in. In de OPTIEBALK gebruik je de tool 
om de tekst te verdraaien. Kies daar een boog met een verbuiging 
van +28%. 
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In het pallet LAGEN merk je dat er nu twee lagen zijn: de TEKSTLAAG 
en de ACHTERGRONDLAAG. Ik ga beide samenvoegen door de op- 
dracht: LAGEN — EÉN LAAG MAKEN. 

Maak nu opnieuw de witte achtergrond transparant met het tover- 
gummetje. Vergeet het wit tussen de letters niet! 


Stap 7 
Lagen maken 


Wanneer dat klaar is, maak je 
drie kopieën van deze laag. 
Sleep LAAG o driemaal achter- 
eenvolgens op het pictogram 
NIEUWE LAAG MAKEN. Het is het 
kleine documentsymbool met 
het ezelsoor naast het prullen- 
mandje onderaan het pallet La- 
GEN. 

Klik in het pallet LAGEN de oog- 
jes voor alle lagen uit, behalve 
dat van onderste laag. Zo’n oog- 
je duidt aan welke laag je te zien 
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Nu is het de beurt aan 
‘papa’. 


krijgt. Klik op de naam van LAAG o in het palet LAGEN. Selecteer 
met de lasso het woord ‘hoempapa’ en wis dit met de DELETE-toets. 
Nu gaan we naar de tweede laag (Laag o kopie). Alle oogjes moe- 
ten uitgeklikt zijn behalve dat voor de tweede laag. Let erop dat de 
tweede laag actief is (op de naam klikken). Vervolgens selecteer je 
met de lasso de letters ‘papa’ en opnieuw wis je die met de DELE- 
TE-toets. 

Daarna zijn de derde en de vierde laag aan de beurt. Na deze in- 
greep heb je vier lagen. Het is de bedoeling dat de bezoeker ‘hoem- 
pa-pa’ te zien krijgt. Op de eerste laag is geen lettergreep te lezen, 
op de tweede staat ‘hoem’, op de derde laag ‘pa’ en op de vierde laag 
de laatste lettergreep ‘pa’. 


Stap 8 
Gif opslaan voor het web 


‘Opstaan voor web 
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Laat de animatie in een lus draaien. 


Ten slotte gaan we weer naar BESTAND - OPSLAAN VOOR WEB. Daar 
duiden we aan dat de afbeelding als gif-bestand zal bewaard wor- 
den. Let erop dat de opties TRANSPARANT en ANIMEREN zijn aange- 
vinkt. Zodra je ANIMEREN actief maakt, kan je aangeven dat de ani- 
matie in een lus moet draaien. Wanneer je dat niet doet, wordt de 
animatie slechts eenmaal afgespeeld. Bovendien vinden we de stan- 
daard framevertraging die op twee tienden van een seconde staat 
iets te snel. In dit geval opteren we voor 0,5 seconde. Het vakje 
VOORVERTONING leidt ons naar de browser die de animatie in wer- 
king zal tonen. 


Conclusie 


Ziezo, de zes lessen Photoshop Elements zit- 
ten er op. Hoe meer je met dit program- 
ma werkt, hoe meer je je realiseert dat dit 
beestje alles in huis heeft om de ama- 
teur-beeldbewerker van dienst te zijn. 
Er zitten zelfs enkele snufjes in die je 
in de professionele Photoshop-editie 
niet aantref. Vooral op het vlak prijs/kwa- 
liteit scoort dit pakket uitermate goed. 
Toch willen we de lezers die de cursus ge- 
volgd hebben, nog niet in de steek laten. 
— Dirk Schoofs — 
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